<template>
  <n-card header-style="background-color:#fafafa" class="my-2 min-h-std" :title="scenarioStore.current_scenario.name">
    <template #header-extra>
      <n-flex>
        <n-button @click="if_modal = true" type="primary">
          添加实例
        </n-button>

        <n-button @click="goback()" type="primary">
          <template #icon>
            <n-icon>
              <KeyboardArrowLeftFilled />
            </n-icon>
          </template>
          返回
        </n-button>
      </n-flex>
    </template>

    <n-modal style="width:500px" class="px-12 pt-8" v-model:show="if_modal" preset="dialog" title="Dialog">

      <template #header>
        创建实例
      </template>
      <CreateScenarioItemFormComponent class="my-2" @finish_create="finishCreate()" />
    </n-modal>
    <n-flex>
      <template v-if="table_data.length != 0">
        <template v-for="i in table_data" :key="i.id">
          <ItemItemComponent :data="i" />
        </template>
      </template>

      <template v-else>
       <n-flex justify="center" class="w-full my-20">
        <n-empty size="huge" description="实例为空，请点击“右上角”添加实例">
        </n-empty>
       </n-flex>

      </template>
    </n-flex>
  </n-card>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { KeyboardArrowLeftFilled } from '@vicons/material';
import { h, ref, onMounted } from "vue";
import { NButton, useMessage } from "naive-ui";
import CreateScenarioItemFormComponent from '@/components/scenario/CreateScenarioItemFormComponent.vue';
import ItemItemComponent from '@/components/scenario/ItemItemComponent.vue';
import { useScenarioStore } from '@/stores/scenarioStore';
const router = useRouter();


const scenarioStore = useScenarioStore();
const if_modal = ref(false);
const table_data = ref([]);
if (scenarioStore.current_scenario == null) {
  scenarioStore.getScenarioById(localStorage.getItem('current_scenario_id'));
}



const finishCreate = async () => {
  await scenarioStore.getScenarioById(scenarioStore.current_scenario.id);
  getScenarioItemListTableData();
  if_modal.value = false;
}

const getScenarioItemListTableData = () => {
  table_data.value.splice(0,table_data.value.length);
  let temp_scenario_item_list = JSON.parse(JSON.stringify(scenarioStore.current_scenario.item_list));
  for (let i of temp_scenario_item_list) {
    let temp_item_item = {
      uuid: i.uuid,
      name: i.name,
      item_type: i.item_type,
      stock_code: i.stock_code,
      stock_name: i.stock_name,
      start_date: formatDate(new Date(i.start_date * 1000)),
      end_date: formatDate(new Date(i.end_date * 1000)),
      description: ''
    }

    for (let j of i.attribute_list) {
      temp_item_item.description += j.label + j.value + ";";
    }
    table_data.value.push(temp_item_item);
  }

}





 getScenarioItemListTableData();



const goback = function () {
  router.replace({
    path: "/scenario",
  })
}
function formatDate(date) {
  // 获取年、月、日
  var year = date.getFullYear();
  var month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需加1；使用padStart确保月份为两位数
  var day = date.getDate().toString().padStart(2, '0'); // 使用padStart确保日期为两位数

  // 拼接日期字符串
  var formattedDate = year + '-' + month + '-' + day;

  return formattedDate;
}

</script>